<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsDiagramCanvas" width="500" height="450" style="background-color: white;"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagramCanvas');
    const ctx = canvas.getContext('2d');

    // Style and context settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Core parameters from image analysis
    const cx = 250;
    const cy = 220;
    const axisLen = 180;
    const A = 150; // Represents the length A in pixels
    const theta = Math.PI / 7.5; // Angle of the rod with the z-axis, visually estimated

    // --- Draw Coordinate Axes ---
    // z-axis (horizontal)
    ctx.beginPath();
    ctx.moveTo(cx - axisLen, cy);
    ctx.lineTo(cx + axisLen, cy);
    // Arrowhead
    ctx.moveTo(cx + axisLen, cy);
    ctx.lineTo(cx + axisLen - 12, cy - 6);
    ctx.moveTo(cx + axisLen, cy);
    ctx.lineTo(cx + axisLen - 12, cy + 6);
    ctx.stroke();

    // x-axis (vertical)
    ctx.beginPath();
    ctx.moveTo(cx, cy + axisLen * 0.9);
    ctx.lineTo(cx, cy - axisLen * 0.9);
    // Arrowhead
    ctx.moveTo(cx, cy - axisLen * 0.9);
    ctx.lineTo(cx - 6, cy - axisLen * 0.9 + 12);
    ctx.moveTo(cx, cy - axisLen * 0.9);
    ctx.lineTo(cx + 6, cy - axisLen * 0.9 + 12);
    ctx.stroke();

    // --- Draw Dumbbell (Rod and Masses) ---
    // Calculate mass positions
    const x1 = cx + A * Math.cos(theta);
    const y1 = cy - A * Math.sin(theta); // y is inverted in canvas coordinates
    const x2 = cx - A * Math.cos(theta);
    const y2 = cy + A * Math.sin(theta);

    // Draw rod
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    // Draw masses
    ctx.beginPath();
    ctx.arc(x1, y1, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x2, y2, 5, 0, 2 * Math.PI);
    ctx.fill();

    // --- Add Labels ---
    // Axis and Origin labels
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText('O', cx - 22, cy - 15);
    ctx.fillText('x', cx - 20, cy - axisLen * 0.9 + 2);
    ctx.fillText('z', cx + axisLen + 15, cy);

    // Mass labels (M₁, M₂)
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText('M', x1 + 18, y1 - 8);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.fillText('1', x1 + 31, y1 - 3);

    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText('M', x2 - 25, y2 + 10);
    ctx.font = "italic 14px 'Times New Roman'";
    ctx.fillText('2', x2 - 12, y2 + 15);

    // Length labels 'A'
    ctx.font = "italic 22px 'Times New Roman'";
    const labelA_offset = 25;
    // For segment OM₁
    const midX1 = (cx + x1) / 2;
    const midY1 = (cy + y1) / 2;
    ctx.fillText('A', midX1 - labelA_offset * Math.sin(theta), midY1 - labelA_offset * Math.cos(theta));
    // For segment OM₂
    const midX2 = (cx + x2) / 2;
    const midY2 = (cy + y2) / 2;
    ctx.fillText('A', midX2 - labelA_offset * Math.sin(theta), midY2 - labelA_offset * Math.cos(theta));

    // Angle label 'θ'
    const angleArcRadius = 45;
    ctx.beginPath();
    ctx.arc(cx, cy, angleArcRadius, 0, -theta, false); // Draw arc clockwise from z-axis
    ctx.stroke();
    ctx.fillText('θ', cx + 60 * Math.cos(-theta / 2), cy + 60 * Math.sin(-theta / 2));

    // Rotation symbol 'ω'
    const rotSymbolX = cx + 130;
    const rotSymbolR = 20;
    ctx.beginPath();
    ctx.arc(rotSymbolX, cy, rotSymbolR, Math.PI * 0.15, Math.PI * 1.85);
    // Arrowhead for rotation arc
    const arrowAngle = Math.PI * 1.85;
    const arrowX = rotSymbolX + rotSymbolR * Math.cos(arrowAngle);
    const arrowY = cy + rotSymbolR * Math.sin(arrowAngle);
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX - 8, arrowY - 6);
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX + 4, arrowY - 8);
    ctx.stroke();
    ctx.fillText('ω', rotSymbolX, cy + rotSymbolR + 18);

    // Figure caption
    ctx.font = "20px 'Times New Roman'";
    ctx.fillText('Fig. 1.134.', cx, cy + axisLen + 30);
</script>
</body>
</html>